<template>
  <div id="login">
	<van-nav-bar title="登录" fixed border/>
	<van-tabs @click="onChangeLoginType">
		<van-tab title="密码登录">
			<van-form @submit="onSubmit">
				<!-- form 根据name属性的值返回数据 -->
				<van-field
					v-model="username"
					name="username"    
					maxlength="11"
					clearable
					label="手机号"
					type="tel"
					placeholder="请填写手机号"
					:rules="[{ pattern, message: '请填写正确11位手机号' }]"
				/>
				<van-field
					v-model="password"
					clearable
					type="password"
					name="password"
					label="密码"
					placeholder="请填写密码"
					:rules="[{ required: true, message: '请填写密码' }]" 
				/>
				<div style="margin: 16px;">
					<van-button round block type="info" native-type="submit">登录</van-button>
				</div>
			</van-form>
		</van-tab>
		<van-tab title="验证码登录">
			<van-form @submit="onSubmit">
				<van-field
					v-model="username"
					name="username"
					maxlength="11"
					clearable
					type="tel"
					label="手机号"
					placeholder="请填写手机号"
					:rules="[{ pattern, message: '请填写正确11位手机号' }]"
				/>
				<van-field
					v-model="sms"
					name="verifyCode"
					center
					clearable
					type="digit"
					label="短信验证码"
					placeholder="请输入短信验证码"
					>
					<template #button>
						<van-button size="small" type="info" @click="getVerifyCode" native-type="button" :disabled="btnable">{{verifyCodeMsg}}</van-button>
					</template>
				</van-field>
						
				<div style="margin: 16px;">
					<van-button round block type="info" native-type="submit">登录</van-button>
				</div>
			</van-form>
		</van-tab>
		<div >
			<van-button color="#ff557f" plain size="mini" to="forgetPsw">忘记密码？</van-button>
			<van-button color="#55aaff"  size="mini" to="signUp">没有账号？去注册👉</van-button>
		</div>
		
   </van-tabs>
  </div>
</template>





<script>
import { Toast } from 'vant';
import { login, sendLoginCode,loginByCode} from '../../api/login.js';
import { viewPersonInfo} from '../../api/person.js';
import { dict} from '../../api/dict.js';
// import { pageCourse } from '../../api/course.js';
export default {
  name: 'login',
  props: {
    msg: String
  },
  data() {
      return {
            username: '',  // 手机号
            password: '',  // 密码
			loginType: false, // 登录的方式  0：密码登录    1：验证码登录
			// verifyCode: '', //  用户输入的验证码
			sms: '',  //   用户输入的验证码
			pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,  // 手机号的正则表达式
			verifyCodeMsg : '获取验证码',  // 获取验证码button展示的文字，点击后会发生改变
			btnable : false,  // 按键使能

			userInfo : {
				phone: '',
				name: '',
				sex: '',
				school: '',
				college: '',
				roles: [],
				no: '',
				buttons: [],
				schoolId: -1,
				collegeId: -1,
				experience: -1,
				allExperience: -1,
			}
          };
  },
  methods: {
		onChangeLoginType(type) {  //  上方的tabs 切换登录的类型
			this.loginType = type ;
			// this.loginType = !this.loginType;
		},
		onSubmit() { // 登录
			if(this.loginType) { // 验证码登录
				loginByCode({
					"code": this.sms,					
					"phone": this.username,  // 手机号
					"remember": true
				}).then(res => {
					console.log(res.data);
					if( res.data.code === 0) { // 登录成功
						if(res.data.data.roles[0] != 'ADMIN') {
							this.userInfo.phone = res.data.data.phone;
							this.userInfo.roles = res.data.data.roles;	
							this.userInfo.buttons = res.data.data.buttons;						
							this.getUserInfo();
						} else {
							Toast('请勿使用管理员账户');
							localStorage.removeItem('auth_token');
						}					
					} else if(res.data.code === 1004){
						Toast('验证码错误');
					} else if(res.data.code === 1006){
						Toast('手机号未注册');
					} else {
						Toast(res.data.msg);
					}
				}).catch(err => {
					console.log(err);
					Toast('请求失败或超时');
				});
			}
			else { // 密码登录
				login({
						"password": this.password,						
						"phone": this.username,   // 手机号
						"remember": true
					}).then(res => {
						console.log(res);
						if( res.data.code === 0) { // 登录成功
							if( res.data.data.roles[0] != 'ADMIN') {
								this.userInfo.phone = res.data.data.phone;
								this.userInfo.roles = res.data.data.roles;	
								this.userInfo.buttons = res.data.data.buttons;						
								this.getUserInfo();
							} else {
								Toast('请勿使用管理员账户');
								localStorage.removeItem('auth_token');
							}
																	
						} else if(res.data.code === 1004){
							Toast('手机号或账号密码错误');
						} else if(res.data.code === 1006){
							Toast('手机号未注册');
						} else {
							Toast(res.data.msg);
						}
					}).catch(err => {
						console.log(err);
						Toast('请求失败或超时');
					});
			}
		},
		async getUserInfo() {

			console.log('viewPersonInfo')
			await viewPersonInfo().then(res => {
				console.log(res);
				if(res.data.code === 0) {
					this.userInfo.name = res.data.data.name?res.data.data.name:'';
					this.userInfo.school = res.data.data.school?res.data.data.school:'';
					this.userInfo.no = res.data.data.no?res.data.data.no:'';					
					this.userInfo.college = res.data.data.college?res.data.data.college:'';
					this.userInfo.sex = res.data.data.sex;		
					this.userInfo.schoolId = res.data.data.schoolId;
					this.userInfo.collegeId = res.data.data.collegeId;	
					this.userInfo.experience = res.data.data.experience;
					this.userInfo.allExperience = res.data.data.allExperience;
				}
			}).catch(err => console.log(err))
			console.log('dict')
			await dict('sex').then(DictRes => {
						console.log(DictRes);
						if(DictRes.data.code === 0) {
							for(let d of DictRes.data.data) {
								if(d.code === this.userInfo.sex) {
									this.userInfo.sex = d.info;									
									break;
								}
							}
						}
					}
					).catch(err => console.log(err))
			localStorage.setItem('userInfo' , JSON.stringify(this.userInfo));	
			this.$router.push({name: "home"});		
		},
		getVerifyCode() {  //  验证码登录，获取验证码函数
			if(this.username === '') {
				Toast('手机号为空');
			} else {
				sendLoginCode(this.username).then(res => {
					console.log(res);
					if(res.data.code === 0) {
						Toast('获取验证码成功');
						this.btnable = true;
						let cnt = 60
						const timer = setInterval(() => {
							this.verifyCodeMsg = cnt + 's后重新发送';
							cnt--;
							if(cnt < 0) {
								this.btnable = false;
								this.verifyCodeMsg = '获取验证码';
								clearInterval(timer);
							}
						}, 1000);
					} else if(res.data.code === 3003){
						this.$toast('您输入的手机号非法或未注册')						
					} else {
						this.$toast(res.data.msg);								
					} 
				}).catch(err => {
					console.log(err);
					Toast('请求失败');					
				});
				
			}
		},
		
	}
}
</script>





<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

	.van-button--mini {
		border: 1px solid ;
	}

</style>
